<template>
  <div>
    <!-- {{userItem}} -->
    <!-- {{form}} -->
    <header class="app-header">设置</header>
    <div v-if="!isHasData" class="setting-login">
      <div class="loginBtn" @click="login">登录</div>
    </div>

    <!-- 登陆之后 -->
    <!-- {{getData}} -->

    <div v-else class="login-boxs">
      <div class="login-tou">
        <div class="login-zuo">
          <img src="../../assets/logo.png" alt="" />
          <div> {{form.name}}</div>
        </div>
        <div class="login-geren" @click="logout">退出></div>
      </div>
      <div class="login-box">
        <ul>
          <li>
            <b>179</b>
            <div>头条</div>
          </li>
          <li>
            <b>249</b>
            <div>获赞</div>
          </li>
          <li>
            <b>740</b>
            <div>粉丝</div>
          </li>
          <li>
            <b>17</b>
            <div>关注</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 登陆之后 -->

    <!-- <div class="setting-unlogin">
      <div class="set-top">
        <div class="set-name">
          <div class="set-avtar"><img src="@/assets/logo.png" alt=""></div>
          <div class="set-bus">前端巴士</div>
        </div>
        <div class="homepage">
          <div class="personal">
            个人主页
            <i class="iconfont icon-download"></i>
          </div>
        </div>
      </div>
      <div>
        <ul>
          <li>
            <div>179</div>
            <div>头条</div>
          </li>
        </ul>
      </div>
    </div> -->
    <div class="card">
      <ul>
        <li>
          <i class="iconfont icon-remind"></i>
          <div>消息通知</div>
        </li>
        <li @click="jumpCollection">
          <i class="iconfont icon-collection"></i>
          <div>收藏</div>
        </li>
        <li @click="jumpHistory">
          <i class="iconfont icon-history"></i>
          <div>浏览历史</div>
        </li>
        <li>
          <i class="iconfont icon-download"></i>
          <div>下载管理</div>
        </li>
      </ul>
    </div>
    <div class="card">
      <div class="xxx">
        记录新鲜事
      </div>

    </div>
  </div>
</template>

<script>
import { getData, removeData } from '@/static/session/setForm.js'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      // a:this.form||{}
      // userItem: JSON.parse(getData())
    }
  },
  mounted () {
    // this.a=this.form
    // if (this.getData == undefined) {
    //   this.$router.push('/login')
    // }
    // console.log(JSON.parse(getData()))
    // console.log(this.form)
    // console.log(this.isHasData)
    // console.log(this.isHasData)
  },
  methods: {
    jumpCollection(){
      this.$router.push('/myCollection')
    },
    jumpHistory(){
      this.$router.push('/myHistory')
    },
    login () {
      this.$router.push('/login')
    },
    logout () {
      sessionStorage.clear()
      this.$router.go()
      // console.log(this.userItem)
      // this.$router.push('/setting')
      // this.removeData(getData)
    }
  },
  computed: {
    ...mapState('login', ['form']),
    isHasData () {
      return !!getData()
    }
  }
}
</script>

<style scoped>
.loginBtn {
  width: 100px;
  height: 100px;
  background-color: #0099cc;
  margin: 20px auto;
  border-radius: 200px;
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size: 20px;
}

.card {
  background-color: white;
  margin: 0 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.card ul {
  display: flex;
  padding: 13px 0;
}

.card li {
  flex-grow: 1;
  text-align: center;
}

.card li i {
  font-size: 38px;
  color: #0099cc;
}

.card li div {
  font-size: 17px;
  font-weight: 100;
}

.xxx {
  font-size: 17px;
  padding: 10px 10px;
}

.set-name {
  position: relative;
}

.set-avtar {
  position: absolute;
  top: 20px;
  left: 10px;
  /* background-color: brown; */
  border-radius: 50px;
}
.set-bus {
  position: absolute;
  top: 28px;
  left: 57px;
}

.set-avtar img {
  width: 40px;
  /* text-align: center; */
  border-radius: 50px;
  background-color: rebeccapurple;
}

.set-top {
  height: 93px;
}

.set-top {
  height: 93px;
}

.homepage {
  position: relative;
}

.personal {
  position: absolute;
  top: 28px;
  right: 10px;
}

.login-tou {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.login-zuo {
  display: flex;
  align-items: center;
}

.login-zuo div {
  color: #000;
  font-size: 20px;
  font-weight: bold;
  margin-left: 20px;
}

.login-zuo img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: transparent;
}

.login-geren {
  font-size: 14px;
  color: #bbb;
}

.login-box > ul {
  margin: 0;
  padding: 16px;
  display: flex;
}

.login-box > ul > li {
  display: flex;
  list-style: none;
  flex-grow: 1;
  text-align: center;
  flex-direction: column;
  justify-content: space-around;
}

.login-box ul li div {
  font-size: 12px;
  color: #ccc;
}
</style>